<template>
  <div class="admin-detail-page" v-loading="pageLoading">
    <!-- 顶部标题栏 -->
    <header class="header">
      <div class="logo">
        <el-button type="primary" @click="handleBack" style="font-size: 16px;font-weight: bold;">
          <el-icon style="font-size: 20px;">
            <Back />
          </el-icon>&nbsp;&nbsp;返回</el-button>
      </div>
      <h1>管理员详细信息</h1>

      <Time />
    </header>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 基本信息 -->
      <div class="info-header">
        <div class="info-dates">
          <span>加入日期: {{ adminInfo.registrationTime }}</span>
          <span>注销日期: {{ adminInfo.logoutTime || 'N/A' }}</span>
        </div>
        <div v-if="adminInfo.status === '已注销'" class="status-badge">
          {{ adminInfo.status }}
        </div>
      </div>
      <div class="detail-form">

        <!-- 表单内容 -->
        <div class="form-content">
          <div class="form-row">
            <div class="form-item">
              <label>管理员账号：</label>
              <el-input v-model="adminInfo.account" disabled />
            </div>
            <div class="form-item">
              <label>管理员密码设置：</label>
              <el-input v-model="adminInfo.newpassword" type="password" placeholder="请输入新密码" :disabled="isFormDisabled" />
            </div>
          </div>

          <div class="form-row">
            <div class="form-item">
              <label>控制人：</label>
              <el-input v-model="adminInfo.controller" :disabled="isFormDisabled" />
            </div>
            <div class="form-item">
              <label>重复密码：</label>
              <el-input v-model="adminInfo.confirmPassword" type="password" placeholder="请再次输入新密码" :disabled="isFormDisabled" />
            </div>
          </div>

          <!-- 权限设置 -->
          <div class="permissions-section">
            <label class="section-label">管理员权限设置：</label>
            <div class="permissions-container">
              <div class="permissions-grid">
                <el-checkbox v-model="permissions.userManage" class="custom-checkbox" :disabled="isFormDisabled">用户管理</el-checkbox>
                <el-checkbox v-model="permissions.meetingManage" class="custom-checkbox" :disabled="isFormDisabled">会议管理</el-checkbox>
                <el-checkbox v-model="permissions.activityManage" class="custom-checkbox" :disabled="isFormDisabled">活动管理</el-checkbox>
                <el-checkbox v-model="permissions.checkInManage" class="custom-checkbox" :disabled="isFormDisabled">签到管理</el-checkbox>
                <el-checkbox v-model="permissions.newsPublish" class="custom-checkbox" :disabled="isFormDisabled">新闻发布</el-checkbox>
                <el-checkbox v-model="permissions.homeEdit" class="custom-checkbox" :disabled="isFormDisabled">主页编辑</el-checkbox>
              </div>

              <div class="special-permissions">
                <div class="permission-row">
                  <el-checkbox v-model="permissions.proposalManage" class="custom-checkbox" :disabled="isFormDisabled">提案管理</el-checkbox>
                  <el-select v-model="adminInfo.proposalDepartment" placeholder="选择部门"
                    @change="handleProposalDepartmentChange" :disabled="!permissions.proposalManage || isFormDisabled">
                    <el-option v-for="dept in proposalDepartments" :key="dept.id" :label="dept.name" :value="dept.id" />
                  </el-select>
                </div>

                <div class="permission-row">
                  <el-checkbox v-model="permissions.socialInfoManage" class="custom-checkbox" :disabled="isFormDisabled">社情民意管理</el-checkbox>
                  <el-select v-model="adminInfo.socialDepartment" placeholder="选择部门"
                    @change="handleSocialDepartmentChange" :disabled="!permissions.socialInfoManage || isFormDisabled">
                    <el-option v-for="dept in socialDepartments" :key="dept.id" :label="dept.name" :value="dept.id" />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="form-actions" v-if="!isFormDisabled">
        <el-button type="primary" @click="handleSave">确定保存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAdminById, getProList, getPubList, updateAdmin } from '@/api/super'
import { useDepartmentStore } from '@/stores/department'
import Time from '@/components/time.vue'
const router = useRouter()
const route = useRoute()

const departmentStore = useDepartmentStore()

// 管理员信息
const adminInfo = ref({})

// 计算属性：表单是否禁用
const isFormDisabled = computed(() => adminInfo.value.status === '已注销')

// 部门列表
const proposalDepartments = computed(() => departmentStore.proposalDepartments)
const socialDepartments = computed(() => departmentStore.socialDepartments)

// 权限设置
const permissions = ref({
  userManage: false,
  meetingManage: false,
  activityManage: false,
  checkInManage: false,
  newsPublish: false,
  homeEdit: false,
  proposalManage: false,
  socialInfoManage: false
})

const pageLoading = ref(false)
const formLoading = ref(false)

// 获取管理员信息
const fetchAdminInfo = async () => {
  formLoading.value = true
  try {
    const aid = route.params.aid
    const res = await getAdminById(aid)
    if (res.code === 200) {
      adminInfo.value = res.data
      // 根据获取到的管理员信息设置权限
      permissions.value.userManage = res.data.manageUsers
      permissions.value.meetingManage = res.data.manageMeetings
      permissions.value.activityManage = res.data.manageEvents
      permissions.value.checkInManage = res.data.manageCheckIns
      permissions.value.newsPublish = res.data.publishNews
      permissions.value.homeEdit = res.data.editHomePage
      permissions.value.proposalManage = res.data.managePropositions
      permissions.value.socialInfoManage = res.data.managePublic
      // 修改部门信息的设置方式
      adminInfo.value.proposalDepartment = res.data.propositionsDepId // 直接使用部门ID
      adminInfo.value.socialDepartment = res.data.publicDepId // 直接使用部门ID
      adminInfo.value.propositionsDepId = res.data.propositionsDepId
      adminInfo.value.publicDepId = res.data.publicDepId
    } else {
      ElMessage.error('获取管理员信息失败')
    }
  } catch (error) {
    ElMessage.error('获取管理员信息失败')
  } finally {
    formLoading.value = false
  }
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 保存修改
const handleSave = async () => {
  formLoading.value = true
  try {
    // 验证密码
    if (adminInfo.value.newpassword && adminInfo.value.newpassword !== adminInfo.value.confirmPassword) {
      ElMessage.error('两次输入的密码不一致')
      return
    }

    // 构建更新数据
    const updateData = {
      aid: adminInfo.value.aid,
      password: adminInfo.value.newpassword,
      controller: adminInfo.value.controller,
      manageUsers: permissions.value.userManage,
      manageMeetings: permissions.value.meetingManage,
      manageEvents: permissions.value.activityManage,
      manageCheckIns: permissions.value.checkInManage,
      publishNews: permissions.value.newsPublish,
      editHomePage: permissions.value.homeEdit,
      managePropositions: permissions.value.proposalManage,
      managePublic: permissions.value.socialInfoManage,
      propositionsDepId: adminInfo.value.propositionsDepId,
      publicDepId: adminInfo.value.publicDepId
    }

    // 发送更新请求
    const res = await updateAdmin(updateData)
    if (res.code === 200) {
      ElMessage.success('保存成功')
      await fetchAdminInfo()
    } else {
      ElMessage.error(res.message || '保存失败')
    }
  } catch (error) {
    ElMessage.error('保存失败：' + error.message)
  } finally {
    formLoading.value = false
  }
}


// 在 script setup 部分添加以下处理函数
const handleProposalDepartmentChange = (deptId) => {
  adminInfo.value.propositionsDepId = deptId
}

const handleSocialDepartmentChange = (deptId) => {
  adminInfo.value.publicDepId = deptId
}

onMounted(async () => {
  pageLoading.value = true
  try {
    await departmentStore.fetchDepartments()
    await fetchAdminInfo()
  } finally {
    pageLoading.value = false
  }
})
</script>

<style scoped>
@import '@/assets/css/header/index.css';
@import '@/assets/css/info.css';


</style>